<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from "vue";
import JButtons from "@/components/j-buttons/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import JType from "@/components/j-type/index.vue";
import YMenuIpt from "./YMenuIpt.vue";
import NavBtn from "./NavBtn.vue";
import YHR from "./YHR.vue";
import { YTab, Kfig, DownType, lodding } from "./scripts/YTab";
import { useRoute } from "vue-router";
import { useClever } from "@/stores/clever";
import DayChart from "../day-chart/index.vue";
import { useCapital } from "@/stores/capital";
import { BalanceHistory } from "./scripts/ChartConfig";
import { hoverdate } from "@/comm/tooltip";
const capital = useCapital();
const clever = useClever().clevers;
// console.log('yzt', clever);
const days = ref([
    {
        label: "W"
    },
    {
        label: "M"
    },
    {
        label: "Y"
    },
    {
        label: "ALL"
    }
]);
const curDay = ref(days.value[0]);

const onDay = () => {
    setTimeout(() => {
        console.log(curDay.value);
        capital.changeHistoryInterval(curDay.value.label);
    }, 30);
};
watch(
    () => capital.historyAmount,
    (newVal: any, oldVal: any) => {
        console.log("history Amount change");
        Kfig.addBalanceHistory(newVal);
    }
);

onMounted(() => {
    const route = useRoute().query;
    console.log("route", route);
    if (route.name) {
        Kfig.addBalance = route as any;
    }
    document.getElementById("y_chart")?.addEventListener("click", (ent: any) => {
        // console.log("yzt", hoverdate);
        //@ts-ignore
        const Time = new Date(hoverdate[0].axisValue).getTime();
        capital.changeTransactionsTimestamp(Time);
        capital.loadPosition(Time);
        capital.loadTransaction();
    });
    setTimeout(() => {
        canShow.value = false;
    }, 90);
    window.addEventListener("resize", YTab.resize);
});
onUnmounted(() => {
    window.removeEventListener("resize", YTab.resize);
});

const canShow = ref(true);
</script>

<template>
    <div class="y__tab" style="position: relative">
        <!-- <NavBtn :call-backfun="YTab.onnvadown" :btns="['链上异动', '余额历史记录']"></NavBtn> -->
        <NavBtn :call-backfun="YTab.onnvadown" :btns="[$t('message.YTab.a'), $t('message.YTab.b')]"></NavBtn>
        <YHR></YHR>

        <div class="cpage" v-show="YTab.page.value === DownType.DataChanges">
            <div class="y_nvaTab d-flex">
                <YMenuIpt></YMenuIpt>&nbsp;&nbsp;
                <JType @change="YTab.onTypeChange"></JType>
                <!-- <JButtons :list="YTab.btns.value" v-model="YTab.idx.value" @change="YTab.onTypeChange"></JButtons> -->
            </div>
            <YHR></YHR>
            <DayChart page="entity"></DayChart>
        </div>
        <div style="width: 100%" v-show="YTab.page.value == DownType.BalanceHistory || canShow">
            <div class="y_nvaTab d-flex r-align">
                <JButtons :list="days" v-model="curDay" @change="onDay"></JButtons>
            </div>
            <YHR></YHR>
            <div class="chart-box">
                <JLoding v-if="lodding"></JLoding>
                <div id="y_chart"></div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.y__tab {
    width: 100%;
}

.y_nvaTab {
    margin-inline-start: 16px;
    margin-block: 8px;
    align-items: center;
}

.chart-box {
    position: relative;
}

#y_chart {
    width: inherit;
    height: 400px;
    position: relative;

    div {
        width: 100% !important;
    }

    :deep(canvas) {
        width: 100% !important;
    }
}

.r-align {
    justify-content: flex-end;
    padding-inline-end: 20px;
}
</style>
